<template>
	<!-- 登录 -->
	<div class="my-login-box">
		<div class="my-login-box-bg">
			<aside class="bg-img-box">
				<TransitionGroup name="list-complete">
					<template v-for="item in bgList" :key="item">
						<div class="bg-img-box-li list-complete-item">
							<img :src="getImgUrl(`login/${item}.png`)" alt="chart" />
						</div>
					</template>
				</TransitionGroup>
			</aside>
		</div>
		<div class="my-login">
			<div class="my-login-carousel">
				<el-carousel height="auto" autoplay>
					<el-carousel-item v-for="item in carouselImgList" :key="item" style="height: auto">
						<img class="my-login-carousel-img" :src="getImgUrl(`login/${item}.png`)" alt="image" />
					</el-carousel-item>
				</el-carousel>
			</div>
			<div class="login-account animate__animated animate__pulse">
				<div class="login-account-container">
					<el-card class="login-account-card" shadow="always">
						<div class="login-account-top">
							<img class="login-account-top-logo" src="~@/assets/img/login/input.png" alt="展示图片" />
						</div>
						<el-form
							class="validate--bottom login-form"
							ref="refLoginForm"
							label-position="top"
							:model="loginForm"
							:rules="loginRules"
							size="large"
						>
							<div class="form">
								<el-form-item prop="username" label="账号">
									<el-input ref="username" size="large" v-model="loginForm.username" placeholder="请输入" />
								</el-form-item>
								<el-form-item prop="password" label="密码">
									<el-input
										ref="password"
										size="large"
										v-model="loginForm.password"
										show-password
										placeholder="请输入"
										@keyup.enter="handleLogin"
									/>
								</el-form-item>
								<el-form-item prop="code" label="请输入" v-if="coo">
									<el-input
										ref="code"
										v-model="loginForm.code"
										placeholder="验证码"
										style="width: 70%"
										@keyup.enter="handleLogin"
									/>
									<div class="login-code tr">
										<img :src="codeUrl" @click.prevent="getCode" class="login-code-img" />
									</div>
								</el-form-item>
								<div class="flex m-between">
									<el-checkbox v-model="loginForm.rememberMe">
										<span :style="{ color: loginForm.rememberMe ? '' : '#d3d7f7' }">记住密码</span>
									</el-checkbox>
								</div>
								<el-form-item>
									<el-button type="primary" class="w100" :loading="loading" @click.prevent="handleLogin">{{
										loading ? '登 录 中...' : '登 录'
									}}</el-button>
								</el-form-item>
							</div>
						</el-form>
					</el-card>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup name="login">
// import { TITLE } from '@/config';
import { captchaImage } from '@a/public';
import { encrypt, decrypt } from '@/utils/jsencrypt';
import { set, get, remove, has } from '@/utils/cookie';
import { parse } from '@u/url';

/**
 * data数据
 */
let codeUrl = ref(''),
	loginForm = reactive({
		username: has('username') ? get('username') : '',
		password: has('password') ? decrypt(get('password')) : '',
		rememberMe: has('rememberMe') ? Boolean(get('rememberMe')) : false,
		code: '',
		uuid: ''
	}),
	coo = ref(false),
	loading = ref(false),
	redirect = useRoute().query?.redirect;
/**
 * 计算属性-计算form表单校验数组
 */
const Rules1 = {
		username: [
			{
				required: true,
				trigger: 'change',
				message: '账号不能为空'
			}
		],
		password: [
			{
				required: true,
				trigger: 'change',
				message: '密码不能为空'
			}
		],
		code: [
			{
				required: true,
				trigger: 'change',
				message: '验证码不能为空'
			}
		]
	},
	Rules2 = {
		username: [
			{
				required: true,
				trigger: 'change',
				message: '账号不能为空'
			}
		],
		password: [
			{
				required: true,
				trigger: 'change',
				message: '密码不能为空'
			}
		]
	};
let loginRules = computed(() => (coo.value ? Rules1 : Rules2));
/**
 * 初始化判断光标位置
 */
let username = shallowRef(null),
	password = shallowRef(null),
	code = shallowRef(null);
onMounted(() => {
	if (loginForm.username === '') {
		username.value.focus();
	} else if (loginForm.password === '') {
		password.value.focus();
	} else {
		if (coo.value) code.value.focus();
	}
});
// 获取是否需要验证码——验证码图片
getCode();
function getCode() {
	captchaImage().then((res) => {
		const { img, uuid } = res.data;
		coo.value = res.data.coo;
		if (coo.value) {
			codeUrl.value = 'data:image/gif;base64,' + img;
			loginForm.uuid = uuid;
		}
	});
}
// 登录接口逻辑
const time = 30 * 24 * 60 * 60,
	refLoginForm = shallowRef(null);
function handleLogin() {
	unref(refLoginForm).validate((valid) => {
		if (valid) {
			loading.value = true;
			if (loginForm.rememberMe) {
				set('username', loginForm.username, time);
				set('password', encrypt(loginForm.password), time);
				set('rememberMe', loginForm.rememberMe, time);
			} else {
				remove('username');
				remove('password');
				remove('rememberMe');
			}
			$store.user
				.Login({ ...loginForm, password: encrypt(loginForm.password) })
				.then(() => {
					nextTick(() => {
						$router.push({ path: redirect || '/', query: parse(redirect) || {} });
					});
				})
				.catch(() => {
					getCode();
					loading.value = false;
				});
		}
	});
}

// 轮播图
const carouselImgList = ['one', 'two', 'three'],
	// 背景图
	bgList = ref(['bar_y', 'bar_x', 'line_gradient', 'line', 'funnel', 'heatmap', 'map', 'pie', 'radar']);

// 打乱
let shuffleTimiing = setInterval(() => {
	bgList.value = shuffle(bgList.value);
}, 4000);

onUnmounted(() => {
	clearInterval(shuffleTimiing);
	shuffleTimiing = null;
});
</script>

<style lang="scss" scoped>
$width: 450px;
$go-login-height: 100vh;
$account-img-height: 240px;
$footer-height: 50px;
$carousel-width: 30%;
$carousel-image-height: 60vh;

.el-card {
	--el-card-bg-color: rgba(240, 240, 240, 0.7);
}
html.dark {
	.el-card {
		--el-card-bg-color: rgba(35, 35, 36, 0.7);
	}
}

@include b(login-box) {
	height: $go-login-height;
	overflow: hidden;
	@include linear-gradient-tb(var(--el-bg-color), var(--el-bg-color-page));

	@include b(login) {
		z-index: 2;
		display: flex;
		justify-content: space-around;
		align-items: center;
		height: $go-login-height;
		width: 100vw;
		position: relative;
		&-carousel {
			width: $carousel-width;
			margin-top: 100px;
			min-width: 500px;
			&-img {
				display: block;
				margin: 0 auto;
				height: $carousel-image-height;
			}
		}
		.login-account {
			display: flex;
			flex-direction: column;
			margin: 0 160px;
			&-container {
				width: $width;
			}

			&-card {
				backdrop-filter: blur(20px);
				box-shadow: 0 0 20px 5px rgba(40, 40, 40, 0.3);
			}

			&-top {
				padding-top: 40px;
				text-align: center;
				height: $account-img-height;
				margin-bottom: 20px;
			}
		}
	}

	&-bg {
		z-index: 0;
		position: fixed;
		display: flex;
		justify-content: space-around;
		align-items: center;
		width: 100vw;
		height: 100vh;
		background: url('@/assets/img/login/login-bg.png') no-repeat 0 -120px;
		.bg-img-box {
			position: relative;
			display: flex;
			flex-wrap: wrap;
			width: 770px;
			margin-left: 50%;
			&-li {
				img {
					margin-right: 20px;
					margin-top: 20px;
					width: 200px;
					border-radius: var(--el-border-radius-base);
					opacity: 0.9;
				}
			}
		}
	}
	.form {
		.title {
			height: 40px;
			line-height: 40px;
			color: #3a3f63;
			font-weight: 800;
			font-size: 32px;
			padding-bottom: 5px;
		}
		.sub-title {
			height: 24px;
			line-height: 24px;
			color: #6a74a5;
			font-size: 16px;
			font-weight: 400;
			padding-bottom: 20px;
		}
		.login-code {
			width: 30%;
			height: 38px;
			float: right;
			img {
				cursor: pointer;
				vertical-align: middle;
			}
		}
		.login-code-img {
			height: 36px;
		}
	}
}
</style>
